import { useSelector, useDispatch } from 'react-redux'
import { increame, decreame, increameSync, increameSaga } from '../store/action/count'
import { increment, decrement } from '../store/action/name'

const HookComponent = () => {
    const count = useSelector(state => state.countReducer.count)
    const dispatch = useDispatch()
    const name = useSelector(state => state.nameReducer.count)

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => dispatch(increame())}>+</button>
            <button onClick={() => dispatch(decreame())}>-</button>
            <button onClick={() => dispatch(increameSync)}>延迟2秒+</button>
            <button onClick={() => dispatch(increameSaga())}>延迟2秒(saga)+</button>
            <h1>redux-actions</h1>
            <p>{name}</p>
            <button onClick={() => dispatch(increment(10))}>redux-action  +1</button>
            <button onClick={() => dispatch(decrement(10))}>redux-action  -1</button>
        </div>
    )
}

export default HookComponent